<!DOCTYPE html>
<html>
<head>
    <title>foo</title>
    <meta charset = "utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <style>
        *{margin:0 ; padding : 0;}
        html, body{height : 100%;width: 100%;}
    </style>
</head>
<body>
<canvas id = "myCanvas" width = "1000" height = "600"></canvas>
<script>
var ppPoint = function(x, y)
{
    this.x = x;
    this.y = y;
}

var ppPointArray = new Array();
var ppMousePressed;
var context = document.getElementById('myCanvas').getContext("2d");
$("#myCanvas").mousedown(function(e){
    if(e.which==1){
        console.log(e)
        ppMousePressed=true
        var mouseX=e.pageX-this.offsetLeft
        var mouseY=e.pageY-this.offsetTop
        ppPointArray.push(new ppPoint(mouseX, mouseY)); //记录路径的第一个点
    }
})
$("#myCanvas").mousemove(function(e){
    if(ppMousePressed){
        console.log(e)
        var mouseX=e.pageX-this.offsetLeft;
        var mouseY=e.pageY-this.offsetTop;
        ppDrawLine(mouseX,mouseY)
    }
})
$("#myCanvas").mouseenter(function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop
    ppPointArray.push(new ppPoint(mouseX, mouseY));
})
$(window).mouseup(function(e){
    console.log(e)
    ppMousePressed=false
})

function ppDrawLine(curX,curY){
    context.beginPath();
    var ppLastPoint=ppPointArray[ppPointArray.length-1];
    context.moveTo(ppLastPoint.x,ppLastPoint.y);
    context.lineTo(curX,curY);
    context.closePath();
    context.stroke();
    ppPointArray.push(new ppPoint(curX,curY))
}
</script>
</body>
</html>